 <template>
    <div>
        <Button-group>
            <Button type="primary" v-for="cateTitle in cateTitles" @click="changeType(cateTitle.type)">{{cateTitle.title}}</Button>
        </Button-group>
        <Button-group>
            <Button type="success" @click="createTitle">添加</Button>
        </Button-group>
        <Button-group>
            <Button type="error" @click="removes">删除多个</Button>
        </Button-group>

        <Tree :data="data" show-checkbox multiple :render="renderContent" @on-check-change="onCheckChange"></Tree>
        <Modal v-model="modal1" title="请修改分类名称" @on-ok="ok" @on-cancel="cancel">
            <Input v-model="value" placeholder="在此处修改分类名称" style="width: 300px"></Input>
        </Modal>
        <Modal v-model="modal4" title="添加">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="分类标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入分类标题"></Input>
                </FormItem>
                <FormItem label="分类父ID" v-if="showfatherid" prop="parentId">
                    <Input v-model="formValidate.parentId" placeholder="请点击需要添加的列表"></Input>
                </FormItem>
                <FormItem label="分类type" prop="type">
                    <Input v-model="formValidate.type" placeholder="需要添加的类型"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
            <div slot="footer">
                <p>请认真填写分类标题</p>
            </div>
        </Modal>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>请注意</span>
            </p>
            <div style="text-align:center">
                <p>删除后将无法恢复</p>
                <p>请问需要继续删除吗？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ids: [],
                modal1: false,
                modal4: false,
                modal2: false,
                modal_loading: false,
                showfatherid:false,
                value: '',
                formValidate: {
                    title: '',
                    parentId: '',
                    type: 0
                },
                ruleValidate: {
                    title: [{
                        required: true,
                        message: '分类标题不能为空',
                        trigger: 'blur'
                    }]
                },
                data: [],
                changedata:{},
                deletedata:{},
                cateTitles:[],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        created() {
            // 在初始化阶段，去请求nodejs的api，返回来json数据
           this.cateTitleData();
           this.getData();
        },
        methods: {
            del () {
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    this.$Message.success('Successfully delete');
                    this.remove(this.deletedata.root,this.deletedata.node,this.deletedata.data)
                    
                }, 1000);
            },
            ok () {
                this.changedata.title=this.value;
                var chadata = this.changedata
                var cateLength = this.cateTitles;
                for(let i =0;i<cateLength.length;i++){
                    if(cateLength[i]._id===chadata._id){
                        cateLength[i].title = chadata.title
                    }
                }
 
                this.updata(chadata);
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.modal4 = false;
                this.showfatherid = false;
                this.$Message.info('Clicked cancel');
            },
            onCheckChange(data) {
                if (data && data.length > 0) {
                    var ids = [];
                    for (let i = 0; i < data.length; i++) {
                        ids.push(data[i]._id)
                    }
                    this.ids = ids;
                }
            },
            removes() {
                this.$http({
                    method: 'post',
                    url: 'http://10.31.153.92:3000/cate/data/removes',
                    data: {
                        ids: this.ids
                    }
                }).then(res => {
                    this.formValidate.type = this.$data.formValidate.type
                    var typeNow = this.$data.formValidate.type;
                    if(!this.$data.formValidate.parentId){
                        this.getData();
                    }else{
                        this.getData(typeNow);
                    }
                    this.cateTitleData();
                    Object.assign(this.$options.data().formValidate, this.$data.formValidate)
                })
            },
            getData(type) {
                var type = type || 0;
                this.$http.post(`http://10.31.153.92:3000/cate/list/${type}`)
                    .then((response) => {
                        this.data = response.data;
                    })
            },
            cateTitleData(){
                this.$http.post(`http://10.31.153.92:3000/cate/list`)
                    .then((response) => {
                        this.cateTitles = response.data
                    })
            },
            createTitle(){
                this.modal4 = true;
                showfatherid:false;
                this.$http.post(`http://10.31.153.92:3000/cate/list`)
                .then((response) => {
                    console.log(response)
                    var resdata = response.data;
                    var  temp = 0;
                    for(let i = 0;i< resdata.length;i++){
                        temp = Math.max(temp,resdata[i].type)
                    }
                    this.formValidate.type = temp+1;
                });
            },
            renderContent(h, {
                root,
                node,
                data
            }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-compose-outline'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    // this.formValidate.parentId = data._id;
                                    // console.log(data)
                                    this.modal1=true;
                                    this.changedata = data
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                            icon: 'android-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.modal4 = true;
                                    this.showfatherid=true;
                                    this.formValidate.parentId = data._id;
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-trash-outline'
                            }),
                            on: {
                                click: () => {
                                    this.modal2 = true;
                                    this.deletedata= {root,node,data}
                                    // this.remove(root, node, data)
                                }
                            }
                        })
                    ])
                ]);
            },
            updata(mychangedata){
                this.$http({
                    method: 'put',
                    url: `http://10.31.153.92:3000/cate/data/${mychangedata._id}`,
                    data:{
                         title:mychangedata.title
                    }
                }).then(res => {
                    this.getData();
                    this.$Message.success('updata success!');
                })
            },
            remove(root, node, data) {

                this.$http({
                    method: 'delete',
                    url: `http://10.31.153.92:3000/cate/data/${data._id}`
                }).then(res => {
                    this.formValidate.type = this.deletedata.data.type;
                    var typeNow=this.deletedata.data.type;
                    if(!this.$data.formValidate.parentId){
                        this.getData();
                    }else{
                        this.getData(typeNow);
                    }
                    this.cateTitleData();
                    this.$Message.success('delete success!');
                })
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // ajax数据请求
                        if(this.formValidate.parentId){
                            this.$http({
                            method: 'post',
                            url:'http://10.31.153.92:3000/cate/data',
                            data: this.formValidate
                            }).then(res=>{
                                this.modal4 = false;
                                this.showfatherid = false;
                                this.$Message.success('Success!');
                                // 重置form表单内容为数据的初始值状态
                                // ********** 非常重要
                                this.formValidate.type = this.$data.formValidate.type
                                var typeNow=this.$data.formValidate.type
                                this.getData(typeNow);
                                Object.assign(this.$options.data().formValidate,this.$data.formValidate);
                                
                            })
                        }else{
                            this.formValidate.parentId=null;
                            this.$http({
                                method:'post',
                                url:`http://10.31.153.92:3000/cate/data`,
                                data:this.formValidate
                            }).then(res=>{
                                this.modal4 = false;
                                this.showfatherid = false;
                                this.formValidate.type = this.$data.formValidate.type
                                var typeNow=this.$data.formValidate.type
                                this.getData(typeNow);
                                this.cateTitleData();
                                Object.assign(this.$options.data().formValidate,this.$data.formValidate);
                                this.$Message.success('save success!');
                                
                            })
                        }
                    } else {
                        this.modal4 = false;
                        this.showfatherid = false;
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            changeType(type) {
                this.getData(type);
                this.formValidate.type = type;
            }

        }
    }
</script>
